<template>
    <p>这是Home</p>
    <h1>js路由跳转</h1>
    <button @click="pushStr">push字符串</button>
    <button @click="pushPath">push 路径 跳转</button>
    <button @click="pushPathQuery">push 路径 query 跳转</button>
    <button @click="pushNameParams">push 命名路由 参数 跳转</button>
    <button @click="pushDynRouteByName">命名路由跳转</button>
    <button @click="pushDynRouteByPath">路由路径拼接</button>
    <button @click="updateVuexCount">修改count</button>
    <button @click="updateVuexCountByObj">修改count-对象方式</button>
    <button @click="getCount">actions-接口请求</button>
    <button @click="getCountByObj">action-接口请求-对象方式</button>

        <!-- <h1>命名空间</h1>
        <p>无命名空间</p>
        <p>访问 模块A中的state数据: {{ $store.state.a.countA }}</p>
        <p>访问 模块A中的getter数据: {{ $store.getters.countAA }}</p>
        <p>有命名空间</p>
        <p>访问 模块B中的state数据: {{ $store.state.b.countB }}</p>
        <p>访问 模块B中的getter数据: {{ $store.getters['b/countBB'] }}</p> -->

    <h1>Vuex module</h1>
    <button @click="commitIncreaseA">触发-moduleA-muations</button>
    <button @click="commitAsyncIncreaseA">触发-moduleA-actions</button>
    <button @click="commitIncreaseB">触发-moduleB-muations</button>
    <button @click="commitAsyncIncreaseB">触发-moduleB-actions</button>

   
</template>

<script>
export default {
    methods: {
        pushStr() {
            this.$router.push('/about')
        },
        pushPath() {
            this.$router.push({ path: '/about' })
        },
        pushPathQuery() {
            this.$router.push({ path: '/about', query: { id: 1, name: 'tom' } })
        },
        pushNameParams() {
            this.$router.push({ name: 'about', state: { params: { id: 2, name: "查附件阿斯顿发送到发发呆" } } })
        },
        pushDynRouteByName() {
            this.$router.push({ name: 'product', params: { id: 123 } })
        },
        pushDynRouteByPath() {
            const id = 123;
            this.$router.push({ path: '/product' + '/' + id })
        },
        updateVuexCount() {
            this.$store.commit('incrementMut', { count: 20 })
            this.$router.push('/vuex')
            console.log("修改成功")
        },
        updateVuexCountByObj() {
            this.$store.commit({
                type: 'incrementMut',
                count: 30
            })
            this.$router.push({ path: '/vuex' })
            console.log("修改成功")
        },
        getCount() {
            console.log("调用getCount方法")
            this.$store.dispatch('incrementAct', { coun: 200 })
        },
        getCountByObj() {
            console.log("getCountByObj")
            this.$store.dispatch({
                type: 'incrementAct',
                count: 10000
            })
            this.$router.push('/vuex')
        }, commitIncreaseA() {
            this.$store.commit('increaseA')
        },
        commitAsyncIncreaseA() {
            this.$store.dispatch('asyncIncreaseA')
        },
        commitIncreaseB() {
            this.$store.commit('b/increaseB')
        },
        commitAsyncIncreaseB() {
            this.$store.dispatch('b/asyncIncreaseB')
        },



    },
    mounted() {
        // console.log("this.$route",this.$route);
        //params接收参数
        console.log(history)
        console.log("this.$router", this.$router);
        console.log("this.$route", this.$route)

    }

}
</script>

<style></style>